
<template>
  <div>
    <!-- 作废页面 -->
    <!-- box-shadow: #f5222d 5px 5px 5px 5px; -->
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '-10px', }">
        <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-row :gutter="24" type="flex" :style="{ marginTop: '0px', backgroundColor: '#e6f7ff' }">
            <!--ccc  -->

            <a-col :span="24" style="background-color: #fff;}">
              <!-- class="yingyinclass2" box-shadow: #40a9ffd9 10px 10px 30px 5px;-->
              <div style="border: 1px solid #fff; " class="imgclass5">
                <div style=";float:left;width:100%">
                  <div style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:100px;float:left">
                    开通情况</div>
                    <img src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"  width="80px" height="20px" style="margin-left:10px;margin-top:20px;float:left"  />
                </div>
                <br />

                <a-row :gutter="24" type="flex" style="margin-top:55px">
                  <a-col :span="4">
                    <div style="font-size: 16px; padding: 10px 0 0 22px; color: black">在途工单数</div>
                  </a-col>
                  <a-col :span="3">
                     <!-- border: 2px solid #40a9ff61; -->
                    <div
                      style="
                       
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 400;
                      "
                      class="yingyinclass"
                    >
                      9
                    </div>
                  </a-col>
                  <a-col :span="3">
                    <!-- border: 2px solid #40a9ff61; -->
                    <div
                      style="
                        
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 400;
                      "
                      class="yingyinclass"
                    >
                      9
                    </div>
                  </a-col>
                  <a-col :span="3">
                    <div
                      style="
                        
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 400;
                      "
                      class="yingyinclass"
                    >
                      9
                    </div>
                  </a-col>
                  <a-col :span="3">
                    <div
                      style="
                        
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 400;
                      "
                      class="yingyinclass"
                    >
                      9
                    </div>
                  </a-col>
                  <a-col :span="3">
                    <div
                      style="
                       
                        text-align: center;
                        height: 50px;
                        width: 35px;
                        margin: auto;
                        margin: auto;
                        line-height: 45px;
                        font-size: 40px;
                        font-weight: 400;
                      "
                      class="yingyinclass"
                    >
                      9
                    </div>
                  </a-col>
                  <a-col :span="5" style="height: 50px; line-height: 50px; ">
                    <span style="font-size: 14px;;">较昨日 </span>
                    <span style="font-size: 15px;font-weight:600;">168 </span>
                    <img src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/up.png" width="10px" height="14px" >
                    <!-- <img src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/dp.png" width="10px" height="14px" style="margin-bottom:4px"> -->
                  </a-col>
                </a-row>
                <a-row :gutter="24" type="flex" :style="{ marginTop: '15px', marginBottom: '15px' }">
                  <a-col :span="5">
                    <div style="font-size: 16px; padding: 0px 0 0 22px; color: black">5日开通及时率</div>
                  </a-col>
                  <a-col :span="16">
                    <a-progress style="padding: 0 0 0 0px;font-weight:600;font-color:black;font-size:15px" :percent="50" size="small" status="active" />
                  </a-col>
                  <a-col :span="3" style="font-weight:600;font-size:15px;margin-top: 1.5px;">1330</a-col>

                  <a-row :gutter="24" type="flex" :style="{ marginTop: '-0px' ,width:'100%'}">
                    <!-- <a-col :span="1"></a-col> -->
                    <a-col :span="7">
                      <a-row>
                        <div style="height: 175px; width: 330px">
                          <div style="height: 210px; width: 330px" id="container"></div>
                        </div>
                      </a-row>
                      <a-row>
                        
                        <div style="text-align: center; font-size: 13px; font-weight: 500">1日快开</div>
                      
                      </a-row>
                    </a-col>

                    <a-col :span="7">
                      <a-row>
                        <div style="height: 175px; width: 330px">
                          <div style="height: 210px; width: 330px" id="container2"></div>
                        </div>
                      </a-row>
                      <a-row>
                       
                        <div style="text-align: center; font-size: 13px; font-weight: 500">2日查勘</div>
                       
                      </a-row>
                    </a-col>

                    <a-col :span="7">
                      <a-row>
                        <div style="height: 175px; width: 330px">
                          <div style="height: 210px; width: 330px" id="container3"></div>
                        </div>
                      </a-row>
                      <a-row>
                       
                        <div style="text-align:center;;font-size:13px;font-weight:500:">3日快建</div>
                      
                      </a-row>
                    </a-col>
                    <a-col :span="1"></a-col>
                  </a-row>
                </a-row>
              </div>
              <!-- <a-row style="background-color:#f0f2f5;height:20px;"></a-row> -->
            </a-col>

            <!-- 40a9ffb5  style="background-color: #e6f7ff"-->

            <a-col :span="12" style="background-color: #fff">
              <!-- box-shadow: #40a9ffd9 10px 10px 30px 5px -->
              <div style="border: 1px solid #fff; " class="imgclass3">
                <!-- <div style="font-size: 18px; padding: 15px 0 0 10px; color: black; font-weight: 500">一点支撑</div> -->
                <div style=";float:left;width:100%">
                  <div style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:100px;float:left">
                    总体情况</div>
                    <img src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"  width="80px" height="20px" style="margin-left:10px;margin-top:20px;float:left"  />
                </div>
                <!-- <div style="font-size: 18px; padding: 0px 0 0 22px; color: black;font-weight: 500">总体情况</div> -->
                <a-row>
                  <a-col :span="24">
                    <div style="height: 160px; width: 95%" id="container5"></div>
                  </a-col>
                  <a-col :span="24"></a-col>
                </a-row>
                <div style="font-size: 16px; padding: 0px 0 0 22px; color: black;">办结情况</div>
                <a-row>
                  <a-col :span="24">
                    <div style="height: 300px; width: 95%" id="container4"></div>
                  </a-col>
                  <a-col :span="24"></a-col>
                </a-row>
              </div>
            </a-col>

            <!--  edbf64c9-->
            <!-- <a-col :span="1" style="background-color: #f0f2f5;width:10px"></a-col> -->
            <a-col :span="12" style="background-color: #fff">
              <!-- box-shadow: #40a9ffd9 10px 10px 30px 5px -->
              <div style="border: 1px solid #fff; " class="imgclass2">
                                <div style=";float:left;width:100%">
                  <div style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:60px;float:left">
                    故障</div>
                    <img src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"  width="80px" height="20px" style="margin-left:10px;margin-top:20px;float:left"  />
                </div>
                <!-- <div style="font-size: 18px; padding: 20px 0 0 10px; color: black; font-weight: 500">故障</div> -->

                <!-- <div style="height: 130px; " id="container;"></div> -->
                <a-row style="margin-top:80px">
                  <div style="height: 130px; width: 85%; float: left; margin: 0 0 1px 0" id="container99"></div>
                  <div style="height: 130px; width: 15%; float: left"></div>
                  <div style="height: 50px; width: 75%; text-align: center; font-size: 13px">企宽</div>
                </a-row>
                <a-row style="margin-top: 40px">
                  <div style="height: 130px; width: 85%; float: left; margin: 0 0 1px 0" id="container88"></div>
                  <div style="height: 130px; width: 15%; float: left"></div>
                  <div style="height: 50px; width: 75%; text-align: center; font-size: 13px">专线（重要集团）</div>
                </a-row>
                <a-row style="margin-top: 40px">
                  <div style="height: 130px; width: 85%; float: left; margin: 0 0 1px 0" id="container77"></div>
                  <div style="height: 50px; width: 15%; float: left"></div>
                  <div style="height: 50px; width: 75%; text-align: center; font-size: 13px">专线 （其他集团）</div>
                </a-row>
                <a-row style="height: 85px"> </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>

        <!-- e6f7ff box-shadow: #40a9ffd9 10px 10px 30px 5px;class="yy"-->
        <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <a-row :gutter="24" type="flex" :style="{ marginTop: '0px', backgroundColor: '#fff' }">
            <a-col :span="24">
              <!-- box-shadow: #40a9ffd9 10px 10px 30px 5px -->
              <div style="border: 1px solid #fff; " class="imgclass4">
                <!-- <a-row>
                  <div style="font-size: 18px; padding: 18px 0 0 25px; color: black; font-weight: 500">开通指标</div>
                </a-row> -->
                <div style=";float:left;width:100%">
                  <div style="font-size: 18px; padding: 15px 0 0 22px; color: black; font-weight: 500;width:100px;float:left">
                    开通指标</div>
                    <img src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"  width="80px" height="20px" style="margin-left:10px;margin-top:20px;float:left"  />
                </div>

                <a-row>
                  <div style="margin-top: 75px;width:100%"></div>
                  
                  <a-col :span="6">
                    <div style="font-size: 12px; padding: 13px 0 0 25px">1日快开</div>
                  </a-col>
                
                  <a-popover title="1日快开" trigger="hover" placement="topLeft">
                    <template slot="content">
                      <p>在途工单量 : 5943121</p>
                      <p>工单总量 ：12321321311</p>
                    </template>
                    <a-col :span="18">
                      <a-button
                        @click="kkEvent"
                        style="
                          height: 40px;
                          width: 30%;
                          padding: 5px 0;
                          background-color: rgb(99, 149, 249, 1);
                          color: #fff;
                        "
                        >30%</a-button
                      >
                    </a-col>
                  </a-popover>
                </a-row>

                <a-row>
                  <div style="margin-top: 25px;width:100%"></div>
                  
                  <a-col :span="6">
                    
                    <div style="font-size: 12px; padding: 13px 0 0 25px">2日22查勘</div>
                   
                  </a-col>
                 
                  <a-popover title="2日查勘" trigger="hover" placement="topLeft">
                    <template slot="content">
                      <p>在途工单量 : 0</p>
                      <p>工单总量 0</p>
                    </template>
                    <a-col :span="18">
                      <a-button
                      @click="ckEvent"
                        style="
                          height: 40px;
                          width: 60%;
                          padding: 5px 0;
                          background-color: rgb(99, 149, 249, 1);
                          color: #fff;
                        "
                        >70%</a-button
                      >
                    </a-col>
                  </a-popover>
                </a-row>
                <a-row style="margin: 0 0 20px 0">
                  <div style="margin-top: 25px;width:100%"></div>
                  
                  <a-col :span="6">
                 
                    <div style="font-size: 12px; padding: 13px 0 0 25px">3日快建</div>
                     
                  </a-col>
                  
                  <a-popover title="3日快建" trigger="hover" placement="topLeft">
                    <template slot="content">
                      <p>在途工单量 : 5943121</p>
                      <p>工单总量 ：12321321311</p>
                    </template>
                    <a-col :span="18">
                      
                      <a-button
                      @click="jsEvent"
                        style="
                          height: 40px;
                          width: 100%;
                          padding: 5px 0;
                          background-color: rgb(99, 149, 249, 1);
                          color: #fff;
                        "
                        >100%</a-button
                      >
                    </a-col>
                  </a-popover>
                </a-row>

                <a-row style="text-align: center; height: 50px">
                  <div style="font-size: 14px; font-weight: 500">福州指标</div>
                </a-row>
              </div>
            </a-col>
          </a-row>

          <a-row :gutter="24" type="flex" :style="{ marginTop: '0px', backgroundColor: '#fff' }">
            <a-col :span="24" style="background-color: #fff; margin-top: 0px">
              <a-row>
                <!-- box-shadow: #40a9ffd9 10px 10px 30px 5px -->
                <div style="border: 1px solid #fff; " class="imgclass1">
                  <div style=";float:left;width:100%">
                  <div style="font-size: 18px; padding: 20px 0 0 22px; color: black; font-weight: 500;width:100px;float:left">
                    故障指标</div>
                    <img src="http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/fuzhu.png"  width="80px" height="20px" style="margin-left:10px;margin-top:25px;float:left"  />
                </div>
     
                  <div style="width:100%;height:80px;"></div>

                 <div style="width:100%;height:120px;">
                  <div style="height: 120px; width: 90%;float:left" id="containerbulletPlot1" class="canvas"></div>
                  <div style="height: 120px; width: 8%;float:left;line-height:122px" >60%</div>
                  <div style="height: 120px; width: 2%;float:left;" ></div>
                  </div>

                  <a-row>
                    <div style="font-size: 12px; padding: 0px 0 0 25px; color: black;text-align:center">
                      <a-button
                        style="
                        border-radius:0px;  
                          height: 10px;
                          width: 10px;
                          padding: 5px 0;
                          margin-top: 4px;
                          background-color: rgb(99, 149, 249, 1);
                        "
                      ></a-button>
                      及时工单量

                       <a-button
                        style="
                           border-radius:0px;  
                          height: 10px;
                          width: 10px;
                          padding: 5px 0;
                          margin-top: 4px;
                          background-color: rgb(98, 218, 171, 1);
                        "
                      ></a-button>
                      超时工单量

                      <a-button
                      style="
                      border-radius:0px;
                        height: 15px;
                        width: 4.5px;
                        padding: 5px 0;
                        margin-top: 1.5px;
                        margin-left:10px;
                        background-color: rgb(99, 149, 249);
                      "
                    >
                    </a-button>
                    基准比例

           
                     
                    <a-button
                      style="
                        border-radius:0px;
                        height: 15px;
                        width: 4px;
                        padding: 5px 0;
                        margin-top: 2px;
                        margin-left:10px;
                        background-color: rgb(98, 218, 171);
                      "
                    ></a-button>
                    挑战比例
                    </div>
                  </a-row>

                  <div style="width:100%;height:60px;"></div>
                  <!-- <div style="width:100%;height:120px;">
                  <div style="height: 120px; width: 85%;float:left" id="containerbulletPlot2"></div>
                  <div style="height: 120px; width: 10%;float:left;line-height:98px" >40%</div>
                  <div style="height: 120px; width: 5%;float:left;" ></div>
                  </div> -->
                  <div style="width:100%;height:120px;">
                  <div style="height: 120px; width: 90%;float:left" id="containerbulletPlot2" class="canvas"></div>
                  <div style="height: 120px; width: 8%;float:left;line-height:122px" >30%</div>
                  <div style="height: 120px; width: 2%;float:left;" ></div>
                  </div>

                  <a-row>
                    <div style="font-size: 12px; padding: 0px 0 0 25px; color: black;text-align:center">
                      <a-button
                        style="
                        border-radius:0px;  
                          height: 10px;
                          width: 10px;
                          padding: 5px 0;
                          margin-top: 4px;
                          background-color: rgb(99, 149, 249, 1);
                        "
                      ></a-button>
                      及时工单量

                       <a-button
                        style="
                           border-radius:0px;  
                          height: 10px;
                          width: 10px;
                          padding: 5px 0;
                          margin-top: 4px;
                          background-color: rgb(98, 218, 171, 1);
                        "
                      ></a-button>
                      超时工单量

                      <a-button
                      style="
                      border-radius:0px;
                        height: 15px;
                        width: 4.5px;
                        padding: 5px 0;
                        margin-top: 1.5px;
                        margin-left:10px;
                        background-color: rgb(99, 149, 249);
                      "
                    >
                    </a-button>
                    基准比例

           
                     
                    <a-button
                      style="
                        border-radius:0px;
                        height: 15px;
                        width: 4px;
                        padding: 5px 0;
                        margin-top: 2px;
                        margin-left:10px;
                        background-color: rgb(98, 218, 171);
                      "
                    ></a-button>
                    挑战比例
                    </div>
                  </a-row>

                   <div style="width:100%;height:60px;"></div>
                  <!-- <div style="width:100%;height:120px;">
                  <div style="height: 120px; width: 85%;float:left" id="containerbulletPlot3"></div>
                  <div style="height: 120px; width: 10%;float:left;line-height:98px" >40%</div>
                  <div style="height: 120px; width: 5%;float:left;" ></div>
                  </div> -->
                  <div style="width:100%;height:120px;">
                  <div style="height: 120px; width: 90%;float:left" id="containerbulletPlot3" class="canvas"></div>
                  <div style="height: 120px; width: 8%;float:left;line-height:122px" >10%</div>
                  <div style="height: 120px; width: 2%;float:left;" ></div>
                  </div>

                  <!-- <a-row>
                    <div style="font-size: 12px; padding: 0px 0 0 25px; color: black">
                      <a-button
                        style="
                        border-radius:0px;  
                          height: 10px;
                          width: 10px;
                          padding: 5px 0;
                          margin-top: 4px;
                          background-color: rgb(99, 149, 249, 1);
                        "
                      ></a-button>
                      满意工单比例，数值显示为满意工单量

                      <a-button
                      style="
                      border-radius:0px;
                        height: 15px;
                        width: 4.5px;
                        padding: 5px 0;
                        margin-top: 1.5px;
                        margin-left:10px;
                        background-color: rgb(99, 149, 249);
                      "
                    >
                    </a-button>
                    基准比例

                      <br />
                      <a-button
                        style="
                           border-radius:0px;  
                          height: 10px;
                          width: 10px;
                          padding: 5px 0;
                          margin-top: 4px;
                          background-color: rgb(98, 218, 171, 1);
                        "
                      ></a-button>
                      不满意工单比例，数值显示为不满意工单量
                    <a-button
                      style="
                        border-radius:0px;
                        height: 15px;
                        width: 4px;
                        padding: 5px 0;
                        margin-top: 2px;
                        margin-left:10px;
                        background-color: rgb(98, 218, 171);
                      "
                    ></a-button>
                    挑战比例
                    </div>
                  </a-row> -->


                  <a-row>
                    <div style="font-size: 12px; padding: 0px 0 0 25px; color: black;text-align:center">
                      <a-button
                        style="
                        border-radius:0px;  
                          height: 10px;
                          width: 10px;
                          padding: 5px 0;
                          margin-top: 4px;
                          background-color: rgb(99, 149, 249, 1);
                        "
                      ></a-button>
                      满意工单量

                       <a-button
                        style="
                           border-radius:0px;  
                          height: 10px;
                          width: 10px;
                          padding: 5px 0;
                          margin-top: 4px;
                          background-color: rgb(98, 218, 171, 1);
                        "
                      ></a-button>
                      不满意工单量

                      <a-button
                      style="
                      border-radius:0px;
                        height: 15px;
                        width: 4.5px;
                        padding: 5px 0;
                        margin-top: 1.5px;
                        margin-left:10px;
                        background-color: rgb(99, 149, 249);
                      "
                    >
                    </a-button>
                    基准比例

           
                     
                    <a-button
                      style="
                        border-radius:0px;
                        height: 15px;
                        width: 4px;
                        padding: 5px 0;
                        margin-top: 2px;
                        margin-left:10px;
                        background-color: rgb(98, 218, 171);
                      "
                    ></a-button>
                    挑战比例
                    </div>
                  </a-row>


                  <!-- <div style="width:100%;height:120px">
                  <div style="height: 120px; width: 85%;float:left" id="containerbulletPlot3"></div>
                  <div style="height: 120px; width: 10%;float:left;line-height:98px" >40%</div>
                  <div style="height: 120px; width: 5%;float:left;" ></div>
                  </div>

                  <div style="font-size: 12px; padding: 0px 0 0 25px; color: black">
                    <a-button
                      style="
                        height: 10px;
                        width: 20px;
                        padding: 5px 0;
                        margin-top: 4px;
                        background-color: rgb(99, 149, 249, 1);
                      "
                    ></a-button>
                    蓝色部分为满意工单比例，数值显示为满意工单量
                    <br />
                    <a-button
                      style="
                        height: 10px;
                        width: 20px;
                        padding: 5px 0;
                        margin-top: 4px;
                        background-color: rgb(98, 218, 171, 1);
                      "
                    ></a-button>
                    浅墨绿色部分为不满意工单比例，数值显示为不满意工单量
                    <br />
                    <a-button
                      style="
                        height: 15px;
                        width: 5px;
                        padding: 5px 0;
                        margin-top: 2px;
                        background-color: rgb(99, 149, 249);
                      "
                    >
                    </a-button>
                    蓝色部分显示为基准比例
                     <br />
                    <a-button
                      style="
                        height: 15px;
                        width: 5px;
                        padding: 5px 0;
                        margin-top: 3px;
                        background-color: rgb(98, 218, 171);
                      "
                    ></a-button>
                    浅墨绿色部分显示为挑战比例33333
                  </div> -->

                </div>

              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    


  </div>
</template>


<script>
import { Donut, StackedColumnLine, Pie, Bar, Bullet } from '@antv/g2plot'

import { getNowTime, getNowFormatDate } from '@/utils/util'
export default {
  components:{},
  data() {
    return {
      startTime:"",
      endTime:"",
      infoData:{},
      kkShow:false,
      qkShow:false,
      ckShow:false,
      jsShow:false,
      columnsStockEnterDetail,
      columnsStockEnterDetail2,
      dataSourceEnterDetail: [
        {
          id: '5',
          pre: '待处理',
          name1: '66',
          name2: '',
          name3: '故障数',
          name4: '超时数',
          desc: '',
        },
        {
          id: '6',
          pre: '已超时',
          name1: '77',
          name2: '其他集团',
          name3: '557',
          name4: '77',
          desc: '',
        },
      ],
      dataSourceEnterDetail2: [
        {
          id: '1',
          pre: '待处理',
          name1: '66',
          name2: '',
          name3: '故障数',
          name4: '超时数',
          desc: '',
        },
        {
          id: '2',
          pre: '',
          name1: '', //首约
          name2: '重要集团',
          name3: '22',
          name4: '33',
          desc: '',
        },
        {
          id: '3',
          pre: '已超时',
          name1: '77',
          name2: '其他集团',
          name3: '557',
          name4: '77',
          desc: '',
        },
      ],
    }
  },

  mounted() {
    let arr =getNowTime()
    this.startTime =arr[0]
    this.endTime = arr[1]
    const bulletPlot1 = new Bullet('containerbulletPlot1', {
      data: [
        {
          title: '故障处理及时率',
          measures: [50, 50],
          targets: [30, 70],
        },
      ],
      rangeMax: 100,
      markerColors: ['#5B8FF9','#5AD8A6'],
      title: {
        visible: false,
        text: '故障指标',
      },
      description: {
        visible: false,
        text:
          // '及时工单量,超时工单量，专线处理及时率',
          '蓝色部分为及时工单量比例，数值显示为及时工单量，浅墨绿色部分为超时工单量比例，数值显示为超时工单量，灰色部分显示为专线处理及时率比例，数值显示为专线处理及时率量',
      },
      legend: {
        formatter: (text) => {
          if (text === '0') {
            return '第一季度'
          } else if (text === '1') {
            return '第二季度'
          } else if (text === '2') {
            return '第三季度'
          } else if (text === '3') {
            return '第四季度'
          }
        },
      },
      label: {
        offset: -6,
            style: {
            
      fill: '#fff',

    },
      },
    })
    bulletPlot1.render()




    const bulletPlot2 = new Bullet('containerbulletPlot2', {
      data: [
        {
          title: '投诉处理及时率',
          measures: [50, 50],
          targets: [40, 60],
        },
      ],
      rangeMax: 100,
      markerColors: ['#5B8FF9','#5AD8A6'],
      // title: {
      //   visible: true,
      //   text: '投诉-堆叠子弹图',
      // },
      description: {
        visible: false,
        text:
          // '及时工单量，超时工单量，投诉处理及时率',
          '蓝色部分为及时工单量比例，数值显示为及时工单量，浅墨绿色部分为超时工单量比例，数值显示为超时工单量，灰色部分显示为投诉处理及时率比例，数值显示为投诉处理及时率量',
      },
      legend: {
        formatter: (text) => {
          if (text === '0') {
            return '第一季度'
          } else if (text === '1') {
            return '第二季度'
          } else if (text === '2') {
            return '第三季度'
          } else if (text === '3') {
            return '第四季度'
          }
        },
      },
      // label: {
      //   offset: -6,
      // },
            label: {
        offset: -6,
            style: {
            
      fill: '#fff',

    },
      },
    })

    bulletPlot2.render()

    const bulletPlot3 = new Bullet('containerbulletPlot3', {
      data: [
        {
          title: '投诉满意度',
          measures: [40, 60],
          targets: [30, 50],
        },
      ],
      rangeMax: 100,
      markerColors: ['#5B8FF9','#5AD8A6'],
      // title: {
      //   visible: true,
      //   text: '满意度-堆叠子弹图',
      // },
      description: {
        visible: false,
        text:
          '蓝色部分为满意工单比例，数值显示为满意工单量，浅墨绿色部分为不满意工单比例，数值显示为不满意工单量，灰色部分显示为投诉回访满意度比例，数值显示为投诉回访满意度工单量',
        // '蓝色部分为未超时工单（满意工单）比例，数值显示为未超时工单（满意工单）数,浅墨绿色部分为超时工单（不满意工单）比例，数值显示为未超时（不满意）工单数,灰色显示及时率（满意度），各指标详细子指标(a) 故障(及时工单量,超时工单量，专线处理及时率)b) 投诉（及时工单量，超时工单量，投诉处理及时率）c)满意度（满意工单量，不满意工单量，投诉回访满意度）)',
      },
      legend: {
        formatter: (text) => {
          if (text === '0') {
            return '第一季度'
          } else if (text === '1') {
            return '第二季度'
          } else if (text === '2') {
            return '第三季度'
          } else if (text === '3') {
            return '第四季度'
          }
        },
      },
            label: {
        offset: -6,
            style: {
            
      fill: '#fff',

    },
      },
    })

    bulletPlot3.render()

    //...........。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
    const data5 = [
      {
        type: '单月未办结',
        value: 27,
      },
      {
        type: '单月办结',
        value: 25,
      },
    ]
    const piePlot = new Pie('container5', {
      forceFit: true,
      radius: 0.8,
      data: data5,
      angleField: 'value',
      colorField: 'type',
      label: {
        visible: true,
        type: 'spider',
      },
    })
    piePlot.render()


    const data99 = [
      {
        type: '待处理',
        value: 27,
      },
      {
        type: '已超时',
        value: 25,
      },
    ]
    const donutPlot99 = new Donut('container99', {
      radius: 1,
      padding: '0px',
      data: data99,
      angleField: 'value',
      colorField: 'type',
    })
    donutPlot99.render()

    const data88 = [
      {
        type: '故障数',
        value: 27,
      },
      {
        type: '超时数',
        value: 25,
      },
    ]
    const donutPlot88 = new Donut('container88', {
      radius: 1,
      padding: '0px',
      data: data88,
      angleField: 'value',
      colorField: 'type',
    })
    donutPlot88.render()

    const data77 = [
      {
        type: '故障数',
        value: 27,
      },
      {
        type: '超时数',
        value: 25,
      },
    ]
    const donutPlot77 = new Donut('container77', {
      radius: 1,
      padding: '0px',
      data: data77,
      angleField: 'value',
      colorField: 'type',
    })
    donutPlot77.render()

    const data = [
      {
        type: '在途工单',
        value: 27,
      },
      {
        type: '超时工单',
        value: 25,
      },
    ]

    const donutPlot = new Donut('container', {
      //  description: {
      //     visible: true,
      //     text: '日快开',
      //   },
      radius: 0.8,
      padding: 'auto',
      data,
      angleField: 'value',
      colorField: 'type',
    })
    const donutPlot2 = new Donut('container2', {
      //  description: {
      //   visible: true,
      //   text: '日查勘',
      // },
      forceFit: true,
      radius: 0.8,
      padding: 'auto',
      data,
      angleField: 'value',
      colorField: 'type',
    })
    const donutPlot3 = new Donut('container3', {
      forceFit: true,
      title: {
        visible: false,
        text: '环图',
      },
      // description: {
      //   visible: true,
      //   text: '日快建',
      // },
      radius: 0.8,

      data,
      angleField: 'value',
      colorField: 'type',
    })
    donutPlot.render()
    donutPlot3.render()
    donutPlot2.render()

    const uvBillData = [
      { 区域: '区县', value: 150, type: '单月未办结' },
      { 区域: '市级', value: 400, type: '单月未办结' },
      { 区域: '省级', value: 300, type: '单月未办结' },
      { 区域: '区县', value: 250, type: '单月办结' },
      { 区域: '市级', value: 200, type: '单月办结' },
      { 区域: '省级', value: 500, type: '单月办结' },
    ]

    const transformData = [
      { 区域: '区县', count: 400 },
      { 区域: '市级', count: 600 },
      { 区域: '省级', count: 800 },
    ]

    const columnLine = new StackedColumnLine('container4', {
      data: [uvBillData, transformData],
      xField: '区域',
      yField: ['value', 'count'],
      columnStackField: 'type',
    })
    columnLine.render()
  },
  methods:{
    kkEvent(){
     
     this.kkShow =true
    },
    jsEvent(){
     this.jsShow =true
    },
    ckEvent(){
     this.ckShow =true
    },
     cancelEvent(){
     this.kkShow =false
     this.jsShow =false
     this.ckShow =false
     this.qkShow =false
    },
  }
}

const columnsStockEnterDetail = [
  {
    title: '',
    dataIndex: 'pre',
    width: '30%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'changeTime' },
  },
  {
    title: '企宽',
    dataIndex: 'name1',
    width: '30%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'changeTime' },
  },
]
const columnsStockEnterDetail2 = [
  {
    title: '',
    dataIndex: 'name2',
    width: '50%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'carNumber' },
  },
  {
    title: '专线',
    dataIndex: 'name3',
    width: '50%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'carNumber' },
  },
  {
    title: '',
    dataIndex: 'name4',
    width: '50%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'carNumber' },
  },
]
</script>
<style>
.dd {
  border: 1px solid;
}

/* .canvas {
  widows: 200px;
  height: 200px;
} */
.yy {
  box-shadow: -12px -5px 3px -1px #40a9ffd9, 0 -12px 3px -1px #40a9ffd9, 0 12px 3px -1px #40a9ffd9,
    12px 3px 10px -1px #40a9ffd9;
}
.yingyinclass{
    width: 35px;
    height: 50px;
    margin: 10px;
    background: linear-gradient(#40a9ff, #40a9ff) left top,
		linear-gradient(#40a9ff, #40a9ff) left top,
		linear-gradient(#40a9ff, #40a9ff) right top,
		linear-gradient(#40a9ff, #40a9ff) right top,
		linear-gradient(#40a9ff, #40a9ff) left bottom,
		linear-gradient(#40a9ff, #40a9ff) left bottom,
		linear-gradient(#40a9ff, #40a9ff) right bottom,
		linear-gradient(#40a9ff, #40a9ff) right bottom;
	background-repeat: no-repeat;
  background-size: 1.5px 10px, 10px 1.5px;
}
.yingyinclass2{
    width: 100%;
    height: 440px;
    margin: 0px;
    background: linear-gradient(#40a9ff, #40a9ff) left top,
		linear-gradient(#40a9ff, #40a9ff) left top,
		linear-gradient(#40a9ff, #40a9ff) right top,
		linear-gradient(#40a9ff, #40a9ff) right top,
		linear-gradient(#40a9ff, #40a9ff) left bottom,
		linear-gradient(#40a9ff, #40a9ff) left bottom,
		linear-gradient(#40a9ff, #40a9ff) right bottom,
		linear-gradient(#40a9ff, #40a9ff) right bottom;
	background-repeat: no-repeat;
  background-size: 1.5px 10px, 10px 1.5px;
}
.yingyinclass3{
    width: 100%;
    height: 50px;
    margin: 0px;
    background: linear-gradient(#40a9ff, #40a9ff) left top,
		linear-gradient(#40a9ff, #40a9ff) left top,
		linear-gradient(#40a9ff, #40a9ff) right top,
		linear-gradient(#40a9ff, #40a9ff) right top,
		linear-gradient(#40a9ff, #40a9ff) left bottom,
		linear-gradient(#40a9ff, #40a9ff) left bottom,
		linear-gradient(#40a9ff, #40a9ff) right bottom,
		linear-gradient(#40a9ff, #40a9ff) right bottom;
	background-repeat: no-repeat;
  background-size: 1.5px 10px, 10px 1.5px;
}
.imgclass5{
  background:url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2047%402x.png);
  background-size: 100% 480px;
  height: 480px;
}
.imgclass4{
  background:url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2048%402x.png);
  background-size: 100% 390px;
  height: 390px;
}
.imgclass3{
  background:url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2049%402x.png);
  background-size: 100% 620px;
  height: 620px;
}
.imgclass2{
  background:url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2050%402x.png);
  background-size: 100% 620px;
  height: 620px;
}
.imgclass1{
  background:url(http://gangmao.oss-cn-shenzhen.aliyuncs.com/test/%E7%BB%84%2051%402x.png);
  background-size: 100% 712px;
   height: 712px;
}

</style>
